<template>
    <div>
        <Search :search="search" :reset="reset">
            <template v-slot:body>
                <el-form-item label="校区" prop="name">
                    <el-input v-model="query.name" name="name" clearable/>
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <Select v-model="query.status" clearable api="status"/>
                </el-form-item>
            </template>
        </Search>
        <div class="table-default">
            <Operate :show="open"/>
            <el-table :data="tableData" class="mt-3" v-loading="loading">
                <el-table-column prop="id" label="校区id"/>
                <el-table-column prop="name" label="校区"/>
                <el-table-column prop="status" label="状态">
                    <template #default="scope">
                        <Status v-model="scope.row.status" :id="scope.row.id" :api="api"/>
                    </template>
                </el-table-column>
                <el-table-column prop="expiration_time" label="过期时间"/>
                <el-table-column prop="created_at" label="创建时间"/>
                <el-table-column prop="updated_at" label="更新时间"/>
                <el-table-column label="操作" width="200">
                    <template #default="scope">
                        <Update @click="open(scope.row.id)"/>
                        <Destroy @click="destroy(api, scope.row.id)"/>
                    </template>
                </el-table-column>
            </el-table>
            <Paginate/>
        </div>

        <Dialog v-model="visible" :title="title" destroy-on-close>
            <Create @close="close(reset)" :primary="id" :api="api"/>
        </Dialog>
    </div>
</template>

<script lang="ts" setup>
import {computed, onMounted} from 'vue'
import Create from './create.vue'
import {useGetList} from '@/composables/curd/useGetList'
import {useDestroy} from '@/composables/curd/useDestroy'
import {useOpen} from '@/composables/curd/useOpen'

const api = 'school/school'

const {data, query, search, reset, loading} = useGetList(api)
const {destroy, deleted} = useDestroy()
const {open, close, title, visible, id} = useOpen()

const tableData = computed(() => data.value?.data)

onMounted(() => {
    search()
    deleted(reset)
})
</script>
